<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/myCss/style.css" />

		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/jmessage-sdk-web.2.3.0.min.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/aui-toast.js"></script>
		<script type="text/javascript" src="js/aui-dialog.js"></script>
		<script src="js/jquery.cookie.js"></script>


		
		<style>
			.file {
				position: relative;
				display: inline-block;
				background: #D0EEFF;
				border: 1px solid #99D3F5;
				border-radius: 4px;
				padding: 4px 12px;
				overflow: hidden;
				color: #1E88C7;
				text-decoration: none;
				text-indent: 0;
				line-height: 20px;
			}
			
			.file input {
				position: absolute;
				font-size: 100px;
				right: 0;
				top: 0;
				opacity: 0;
			}
			
			.file:hover {
				background: #AADFFD;
				border-color: #78C3F3;
				color: #004974;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div id="friendsPage">
			<header class="aui-bar aui-bar-nav ">
				<div class="aui-title">好友列表</div>
				<div class="aui-btn aui-pull-right"><span class="aui-iconfont aui-icon-plus" id="addFriend"></span></div>
			</header>
			<div class="aui-searchbar" id="search">
				<div class="aui-searchbar-input aui-border-radius" tapmode>
					<i class="aui-iconfont aui-icon-search"></i>
					<form action="javascript:search();">
						<input type="search" placeholder="请输入搜索内容" id="search-input">
					</form>
				</div>
			</div>

			<div class="aui-card-list-content">
				<ul class="aui-list aui-media-list" id="friendList">
				</ul>
			</div>
			<div class="aui-card-list-footer aui-text-center">
				查看更多
			</div>

			<div style="padding-left: 40px;padding-top: 200px;padding-right: 40px; display: none;" class="aui-content aui-margin-b-15" style="text-align: center;padding-top: 200px;" id="popUp">
				<ul class="aui-list aui-form-list">

					<li class="aui-list-item">

						<div class="aui-list-item-inner">
							<div class="aui-label"> 输入好友id:</div>
							<div class="aui-list-item-input">

								<input style="padding-left: 10px;" type="text" id="friendId" />
							</div>

						</div>
					</li>
					<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
						<button class="aui-btn aui-btn-info " id="sendAddFriendRequestBtn">添加好友</button>
						<button class="aui-btn aui-btn-danger " id="canceladdFriendRequestBtn">取消</button>
					</div>
				</ul>
			</div>

			<div style="padding-top: 200px; text-align: center;display: none;" id="acceptPop">
				<div id="requestInfo"></div>
				<div class="aui-btn aui-btn-info aui-margin-r-5" id="agree">同意</div>
				<div class="aui-btn aui-btn-danger aui-margin-l-5" id="disagree">不同意</div>
			</div>

		</div>
		<div id="chatPage" style="display: none;">

			<header class="aui-bar aui-bar-nav">
				<a class="aui-pull-left aui-btn" id="goToFriendPage">
					<span class="aui-iconfont aui-icon-left"></span>
				</a>

				<div class="aui-title" id="header"></div>

			</header>
			<section class="aui-chat" style="height: auto;">

			</section>

			<div style="padding-top: 400px;" id="info">
				<div style="padding-left: 5px;">请输入发送内容:<input type="text" id="message" style="font-size: 20px; " /></div>
				<br />
				<div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm" id="sendMessage">发送</div>
			</div>
			<div class="file" style="margin-top: 15px;">
				<div id="choosePictureWord"></div>
							
			</div>
			<input id="uploadPicture" accept="image/x-png;image/jpeg" type="file" style="width: 20%;" />	
			<button id="sendPicture">发送图片</button>
			
			<button id="sendLocation" style="margin-left: 40px;"> 发送定位(假数据,只有经纬度)</button>
		</div>

	</body>
	<script>
		var JIM = new JMessage();
		var myData;
		var loginUsername = localStorage.loginUsername;
		var loginPassword = localStorage.loginPassword;
		var chatUserId;
		var toast = new auiToast();
		var dialog = new auiDialog({});
		var lastChatId;
		var requestHistoryInfo = true;
		$(document).ready(function() {
			init();

		})

		/**
		 * 跳出添加好友框
		 */
		$("#addFriend").click(function() {
			document.getElementById("popUp").style.display = "";

		})

		$("#sendAddFriendRequestBtn").click(function() {
			JIM.addFriend({
				"target_name": $("#friendId").val(),
				"from_type": 1,
				"why": "交个朋友",

			}).onSuccess(
				function(data) {
					$("#popUp").css("display", "none");
					toast.success({
						title: "请求已发送",
						duration: 2000
					})

				}
			).onFail(
				function(data) {
					alert("请求发送失败");
				}
			)

		})

		function init() {
			var time = new Date().getTime();
			var signature = hex_md5("appkey=a063bae8671dc9c2c3061d63&timestamp=" +
				time + "&random_str=022cd9fd995849b58b3ef0e943421ed9&key=e5d5124b67e1c33c0387a745");

			JIM.init({
				"appkey": "a063bae8671dc9c2c3061d63",
				"random_str": "022cd9fd995849b58b3ef0e943421ed9",
				"signature": signature,
				"timestamp": time,
				"flag": 1
			}).onSuccess(function(data) {
				console.log('success:' + JSON.stringify(data));
				login();
			}).onFail(function(data) {
				console.log("fail")
			})
		}

		function login() {
			JIM.login({
					"username": loginUsername,
					"password": loginPassword
				}).onSuccess(function(data) {
					JIM.isConnect();
					//searchFriend();
					listrnFriendRequest();
					getUserMessage();
					getConversation();
					//getSyncConversation();

				})
				.onFail(function(data) {

					//alert("登录失败"+JSON.stringify(data))

					console.log("登录失败" + JSON.stringify(data));
				})
		}

		function getConversation() {
			JIM.getConversation().onSuccess(function(data) {
				//alert(JSON.stringify(data))
				$.each(data.conversations, function() {
					if(this.name != loginUsername) {
						$("#friendList").append("<li class='aui-list-item aui-list-item-middle' id=" + this.name + "  class='friendListClass'>" + "<div class='aui-media-list-item-inner'>" +
							"<div class='aui-list-item-media'>" +
							"<img  class='aui-img-round aui-list-img-sm'/>" +
							"</div>" +
							"<div class='aui-list-item-inner aui-list-item-arrow' id='friendIdInList'>" +
							this.nickName +
							"</div>" +
							"</div>" +
							"</li>");
					}
				})
			}).onFail(function() {
				alert("获取消息失败")
			})
		}

		function getSyncConversation() {
			JIM.onSyncConversation(function(data) {
				alert(JSON.stringify(data))
			});
		}

		function listrnFriendRequest() {
			JIM.onEventNotification(
				function(data) {
					if(data.event_type == 5) {
						someOneAddYou(data);
					}
				}
			)
		}

		function someOneAddYou(data) {
			myData = data;
			$("#acceptPop").css("display", "");
			$("#requestInfo").append("id为:" + data.from_username + "请求加您为好友");

		}

		$("#agree").click(
			function() {
				JIM.addFriend({
					'target_name': myData.from_username,
					'from_type': '2',
					'why': "",
				}).onSuccess(function(data) {
					//data.code 返回码
					//data.message 描述
					toast.success({
						title: "添加成功",
						duration: 1000

					})
					$("#acceptPop").css("display", "none");
					searchFriend();
				}).onFail(function(data) {
					// 同上
				});
			}
		)

		$("#disagree").click(
			function() {
				JIM.addFriend({
					'target_name': myData.from_username,
					'from_type': '2',
					'why': "不同意",
				}).onSuccess(function(data) {
					//data.code 返回码
					//data.message 描述
					toast.success({
						title: "已拒绝请求",
						duration: 1000

					})

					$("#acceptPop").css("display", "none");
				}).onFail(function(data) {
					// 同上
				});
			}
		)

		function searchFriend() {
			JIM.getFriendList()
				.onSuccess(function(data) {
					//alert(JSON.stringify(data));
					$("#friendList").text("");
					$.each(data.friend_list, function() {
						addFriendToList(this);
					});
					/*$("li").on("click",function(){chatUserId=this.id;alert(chatUserId)})*/
				})
		}

		function addFriendToList(friend) {
			$("#friendList").append("<li class='aui-list-item aui-list-item-middle' id=" + friend.username + "  class='friendListClass'>" +
				"<div class='aui-media-list-item-inner'>" +
				"<div class='aui-list-item-media'>" +
				"<img  class='aui-img-round aui-list-img-sm'/>" +
				"</div>" +
				"<div class='aui-list-item-inner aui-list-item-arrow' id='friendIdInList'>" +
				friend.username +
				"</div>" +
				"</div>" +
				"</li>");

		}


		/**
		 * 页面跳转
		 */
		$(document).on("click", "li", function() {
			goToChatPage(this);
		})

		function goToChatPage(element) {
			chatUserId = $(element).find(".aui-list-item-arrow").text();
			if(lastChatId != localStorage.chatUserId) {
				$("section").text("");
				lastChatId = chatUserId;
			} else {
				requestHistoryInfo = false;
			}

			$("#friendsPage").css("display", "none");
			$("#chatPage").css("display", "");
			$("#header").text("");
			$("#header").append("与" + chatUserId + "的聊天");
		}

		$("#canceladdFriendRequestBtn").click(function() {
			$("#popUp").css("display", "none")
		})




















		/**
		 * 
		 * 
		 * 
		 * 聊天页面代码
		 * 
		 * 
		 * 
		 * 
		 */

		 $("#goToFriendPage").click(function() {
			$("#friendsPage").css("display", "");
			$("#chatPage").css("display", "none")
		});

		
		$("#choosePictureWord").click(function(){
			$("#uploadPicture").click();
		})
		
		$("#sendPicture").click(function()
		{
			if($("#uploadPicture").val()=="")
			return false;
			var picture = new FormData($("#form"));
			
			JIM.sendSinglePic({
                 'target_username' : chatUserId,
                 'image' : getFile(),
              }).onSuccess(function(data , msg) {
               	//alert(JSON.stringify(data))
               	//alert(JSON.stringify(msg))
               	//addMsgLeft(JSON.stringify(msg))
               	//addMsgRight(JSON.stringify(data))
               	console.log(JSON.stringify(msg))
               	//$("#uploadPicture").val("")
               	var media_id = msg.content.msg_body.media_id;
               	//alert(media_id)
               addPicRight("http://dl.im.jiguang.cn/"+media_id+"")

               }).onFail(function(data) {
                   //同发送单聊文本
                   
               	alert(JSON.stringify(data))
               });
               
               
		})
		
		function getFile() {
		var fd = new FormData();
		var file =document.getElementById("uploadPicture");
		if(!file.files[0]) {
			appendToDashboard('error:' + '获取文件失败');
			throw new Error('获取文件失败');
		}
		fd.append(file.files[0].name, file.files[0]);
		return fd;
	}
		
		
		

		function getUserMessage() {
			JIM.onMsgReceive(function(data) {
				$(data.messages).each(function() {
					addMsgLeft(this);
				})
			})

		}


		$("#sendMessage").click(function() {
			JIM.sendSingleMsg({
				"target_username": chatUserId,
				"content": $("#message").val(),
				"no_notification": true
			}).onSuccess(function(data) {
				addMsgRight($("#message").val());
				document.getElementById("message").value = "";
			})
		})
		
		$("#sendLocation").click(function()
		{
			JIM.sendSingleLocation({
                 'target_username' : chatUserId,
         		 'latitude' : 30.3089800000,
                 'longitude' : 120.3889900000,
                 'scale' : 1,
                 'label' : '浙江工商大学'
              }).onSuccess(function(data , msg) {
              	addLocationRight(30.3089800000,120.3889900000,'浙江工商大学');
               }).onFail(function(data) {
               });
		})




		function addMsgLeft(message) {
			$(".aui-chat").append(
				"<div class='aui-chat-item aui-chat-left'>" +

				"<div class='aui-chat-inner'>" +
				"<div class='aui-chat-name'>" + message.content.from_id + " <span class='aui-label aui-label-warning'></span></div>" +
				"<div class='aui-chat-content'>" +
				"<div class='aui-chat-arrow'></div>" +
				message.content.msg_body.text +
				"</div>" +

				"</div>" +
				"</div>"
			)
		}

		function addMsgRight(content) {

			$(".aui-chat").append(
				"<div class='aui-chat-item aui-chat-right'>" +

				"<div class='aui-chat-inner'>" +
				"<div class='aui-chat-name'>" + loginUsername + " <span class='aui-label aui-label-warning'></span></div>" +
				"<div class='aui-chat-content'>" +
				"<div class='aui-chat-arrow'></div>" +
				content +
				"</div>" +
				"<div class='aui-chat-status aui-chat-status-refresh'>" +
				"<i class='aui-iconfont aui-icon-correct aui-text-success'></i>" +
				"</div>" +
				"</div>" +
				"</div>"
			)
		}



		function addPicLeft(message) {
			$(".aui-chat").append(
				"<div class='aui-chat-item aui-chat-left'>" +

				"<div class='aui-chat-inner'>" +
				"<div class='aui-chat-name'>" + message.content.from_id + " <span class='aui-label aui-label-warning'></span></div>" +
				"<div class='aui-chat-content'>" +
				"<div class='aui-chat-arrow'></div>" +
				message.content.msg_body.text +
				"</div>" +

				"</div>" +
				"</div>"
			)
		}


		function addPicRight(url) {

			$(".aui-chat").append(
				"<div class='aui-chat-item aui-chat-right'>" +

				"<div class='aui-chat-inner'>" +
				"<div class='aui-chat-name'>" + loginUsername + " <span class='aui-label aui-label-warning'></span></div>" +
				"<div class='aui-chat-content'>" +
				"<div class='aui-chat-arrow'></div>" +
				"<img src="+url+">" +
				"</div>" +
				"<div class='aui-chat-status aui-chat-status-refresh'>" +
				"<i class='aui-iconfont aui-icon-correct aui-text-success'></i>" +
				"</div>" +
				"</div>" +
				"</div>"
			)
		}
		
		function addLocationLeft(message) {
			$(".aui-chat").append(
				"<div class='aui-chat-item aui-chat-left'>" +

				"<div class='aui-chat-inner'>" +
				"<div class='aui-chat-name'>" + message.content.from_id + " <span class='aui-label aui-label-warning'></span></div>" +
				"<div class='aui-chat-content'>" +
				"<div class='aui-chat-arrow'></div>" +
				message.content.msg_body.text +
				"</div>" +

				"</div>" +
				"</div>"
			)
		}


		function addLocationRight(latitude,longitude,label) {

			$(".aui-chat").append(
				"<div class='aui-chat-item aui-chat-right'>" +

				"<div class='aui-chat-inner'>" +
				"<div class='aui-chat-name'>" + loginUsername + " <span class='aui-label aui-label-warning'></span></div>" +
				"<div class='aui-chat-content'>" +
				"<div class='aui-chat-arrow'></div>" +
				"经度:"+latitude+",纬度:"+longitude+",地点:"+label+
				"</div>" +
				"<div class='aui-chat-status aui-chat-status-refresh'>" +
				"<i class='aui-iconfont aui-icon-correct aui-text-success'></i>" +
				"</div>" +
				"</div>" +
				"</div>"
			)
		}
	</script>

</html>